<!DOCTYPE html>
<html lang="cn">
<head>
    <title>{$data.title}</title>
    <meta name="description" content="{$data.share_introduction}">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <link rel="stylesheet" href="{$data.ossHost}/static/active_fortune_year_2021/css/animate.min.css?v=4">
    <link rel="stylesheet" href="/static/active_fortune_year_2021/css/style.css?v=4">
    <style type="text/css">
        /*下滑gif*/
        .next-s {
            background: url("{$data.ossHost}/static/active_fortune_year_2021/img/next.png") no-repeat center center;
            background-size: 100%;
            width: 0.48rem;
            height: 0.48rem;
            position: absolute;
            bottom: 0.82rem;
            left: calc(50% - 0.24rem);
            z-index: 120;
        }

        .text_next {
            font-size: 0.24rem;
            color: #fff;
            z-index: 121;
            bottom: 0.38rem;
            left: calc(50% - 0.48rem);
            text-align: center;
            position: absolute;
        }


        /*星星背景*/
        span {
            width: 30px;
            height: 30px;
            background: url("{$data.ossHost}/static/active_fortune_year_2021/img/star.png") no-repeat;
            position: absolute;
            background-size: 100% 100%;
            animation: flash 1s alternate infinite;
        }

        @keyframes flash {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        span:hover {
            transform: scale(3, 3) rotate(180deg) !important;
            transition: all 1s;
        }

        /*星星背景*/
    </style>
</head>
<body>
<!--音乐-->
<div class="music-box">
    <img class="music-logo" src="{$data.ossHost}/static/active_fortune_year_2021/img/music.png" alt="">
    <audio id="bg-music" src="{$data.ossHost}/static/active_fortune_year_2021/music/background1.mp3" loop="loop"></audio>
</div>
<!--加载中-->
<div class="load-background">
    <div class="load-box">
        <img src="{$data.ossHost}/static/active_fortune_year_2021/img/loading.gif" class="load-img" alt="">
        <div class="progress-box">
        </div>
    </div>
</div>
<!--星星背景-->
<div class="bg_stars"></div>
<!--中间步骤-->
<div class="content-box">
    <div class="con-background p1">
        <div class="bg_star" style="display: none"></div>
        <div class="img1" style="display: none"></div>
        <div class="img2" style="display: none"></div>
        <div class="img3" style="display: none"></div>
        <div class="img4" style="display: none"></div>
        <div class="img5" style="display: none"></div>
        <div class="agree_con" style="display: none">
            <div class="img_agree"></div>
            <div class="text_agree">允许准了使用档案相关信息生成报告</div>
        </div>

    </div>
    <div class="con-background p2">
        <div class="bg_star" style="display: none"></div>
        <div class="img1" style="display: none"></div>
        <div class="txt_con">
            <div class="txt1"></div>
            <div class="txt2">
                <div class="item item_sun">
                    <div class="planet"></div>
                    <div class="sign"></div>
                </div>
                <div class="sep"></div>
                <div class="item item_moon">
                    <div class="planet"></div>
                    <div class="sign"></div>
                </div>
                <div class="sep"></div>
                <div class="item item_asc">
                    <div class="planet"></div>
                    <div class="sign"></div>
                </div>
            </div>
        </div>
        <div class="img3" style="display: none"></div>
        <div class="img2" style="display: none"></div>
        <div class="next un next-s" style="display: none"></div>
        <div class="text_next" style="display: none"></div>
    </div>
    <div class="con-background p3">
        <div class="bg_star" style="display: none"></div>
        <div class="img1" style="display: none"></div>
        <div class="date_con" style="display: none">
            <div class="text_year"></div>
            <div class="img_date img_year"></div>
            <div class="text_month"></div>
            <div class="img_date img_month"></div>
            <div class="text_day"></div>
            <div class="img_date img_day"></div>
        </div>
        <div class="img2" style="display: none"></div>
        <div class="bottom_con">
            <div class="img3" style="display: none"></div>
            <div class="day" style="display: none"></div>
            <div class="img4" style="display: none"></div>
        </div>
        <div class="img5" style="display: none"></div>
        <a href="javascript:;" class="next un next-s" style="display: none"></a>
        <div class="text_next" style="display: none"></div>
    </div>
    <div class="con-background p4">
        <div class="img1" style="display: none"></div>
        <div class="img2" style="display: none"></div>

        <div class="sign" style="display: none"></div>
        <div class="line" style="display: none"></div>

        <div class="img4" style="display: none"></div>
        <div class="img3" style="display: none"></div>

        <a href="javascript:;" class="next un next-s" style="display: none"></a>
        <div class="text_next" style="display: none"></div>
    </div>
    <div class="con-background p5">
        <div class="img1" style="display: none"></div>
        <div class="img2" style="display: none"></div>
        <div class="img3" style="display: none"></div>

        <a href="javascript:;" class="next un next-s" style="display: none"></a>
        <div class="text_next" style="display: none"></div>
    </div>

    <div class="con-background p6">
        <div class="img1" style="display: none"></div>
        <div class="img2" style="display: none"></div>
        <div class="img3" style="display: none"></div>
        <div class="count_record_con">
            <div class="record_img1" style="display: none"></div>
            <div class="count_record" style="display: none"></div>
            <div class="record_img2" style="display: none"></div>
            <div class="record_img3" style="display: none"></div>
        </div>
        <div class="count_synastry_con">
            <div class="synastry_img1" style="display: none"></div>
            <div class="count_synastry" style="display: none"></div>
            <div class="synastry_img2" style="display: none"></div>
            <div class="synastry_img3" style="display: none"></div>
        </div>
        <div class="score_con">
            <div class="score_img1" style="display: none"></div>
            <div class="score_synastry" style="display: none"></div>
            <div class="score_img2" style="display: none"></div>
        </div>
        <div class="score_invite_con">
            <div class="synastry_invite" style="display: none"></div>
        </div>

        <a href="javascript:;" class="next un next-s" style="display: none"></a>
        <div class="text_next" style="display: none"></div>
    </div>
    <div class="con-background p7">
        <div class="img2" style="display: none"></div>
        <div class="bg_star" style="display: none"></div>
        <div class="img3" style="display: none"></div>
        <div class="img4" style="display: none"></div>
        <div class="img5" style="display: none"></div>
        <div class="img6" style="display: none"></div>
    </div>

    <div class="con-background p8">
        <div class="bg_star" style="display: none"></div>
        <div class="img2" style="display: none"></div>
        <div class="text" style="display: none"></div>
        <div class="img3" style="display: none"></div>
        <div class="img4" style="display: none"></div>
    </div>

    <div class="con-background p9">
        <div class="bg_star" style="display: none"></div>
        <div class="img6" style="display: none"></div>
        <div class="img_text" style="display: none"></div>
        <div class="line" style="display: none"></div>
        <div class="img2" style="display: none"></div>
        <div class="img4" style="display: none"></div>
        <div class="img3" style="display: none"></div>
        <div class="img5" style="display: none"></div>
        <div class="img_btn2" style="display: none"></div>
    </div>

    <div class="con-background p10">
        <div class="img1" style="display: none"></div>
        <div class="bg_star" style="display: none"></div>
        <div class="img2" style="display: none"></div>
        <div class="img3" style="display: none"></div>
        <div class="text" style="display: none"></div>
        <div class="bg_bottom_star" style="display: none"></div>
        <div class="img4" style="display: none"></div>
        <div class="img5" style="display: none"></div>
        <div class="img_click_1" style="display: none"></div>
        <div class="img_click_2" style="display: none"></div>
        <div class="img_click_3" style="display: none"></div>
    </div>

    <div class="con-background p11">
        <div class="bg_star" style="display: none"></div>
        <div class="react_border" style="display: none"></div>
        <div class="img1" style="display: none"></div>
        <div class="img2" style="display: none"></div>
        <div class="img3" style="display: none"></div>
        <div class="img4" style="display: none"></div>
        <div class="img_btn" style="display: none"></div>
    </div>
</div>
<!--结果页面-->
<div class="bg-box">
    <img id="result_img">
    <img id="save_pic_btn" alt="">
    <div class="btbox">
        <img id="bottom_bg" alt="">
        <div class="top">
            <img id="year_btn">
            <img id="share_btn" alt="">
        </div>
    </div>
    <div class="cloud_bottom"></div>
    <div class="cover-box">
        <!--分享图片-->
        <div class="msg" style="display: none" alt=""></div>
        <!--加载中-->
        <img id="loading" style="display: none" alt="">
    </div>
    <!--保存图片-->
    <img id="save_img" alt="">

</div>
</body>
<script src="{$data.ossHost}/static/active_fortune_year_2021/js/adaptation.js?v=4"></script>
<script src="{$data.ossHost}/static/active_fortune_year_2021/js/resLoader.js"></script>
<script src="{$data.ossHost}/static/active_fortune_year_2021/js/jquery-v2.1.1.min.js"></script>
<script src="{$data.ossHost}/static/active_fortune_year_2021/js/EventUtil.js"></script>
<script type="text/javascript">
    var localhosts = "{$data.host}";
    var osshosts = "{$data.ossHost}";
    var uid = "{$data.uid}";
    var type = "{$data.type}";
    var sign = "{$data.sign}";
    var isInApp = "{$data.isInApp}";
    var app_type = '{$data.app_type}';
    var version = '{$version}'
    var share_title = '{$data.share_title}';
    var share_introduction = '{$data.share_introduction}';
    var data_wechat = JSON.parse('{:json_encode($data)}');

    var not_in_app_login_url = '{$data.not_in_app_login_url}';
    var not_in_app_is_login = '{$data.not_in_app_is_login}';
    var not_in_app_page = '{$data.not_in_app_page}';

    var moon = "{$data.moon}";
    var asc = "{$data.asc}";

    var name = "{$data.name}";//用户昵称
    var reg_year = "{$data.reg_year}";//用户注册年
    var reg_month = "{$data.reg_month}";//用户注册月份
    var reg_day = "{$data.reg_day}";//用户注册日
    var from_now_day = "{$data.from_now_day}";//已注册了*天
    var count_record_2021 = "{$data.count_record_2021}";//2021新增了多少档案
    var count_synastry_2021 = "{$data.count_synastry_2021}";//2021合盘了多少次
    var max_score_synastry_2021 = "{$data.max_score_synastry_2021}";//2021合盘的最高分数
    var word_jupiter = "{$data.word_jupiter}";//木星词条
    var word_mars = "{$data.word_mars}";//火星词条
</script>

<!--App引入，本地跳转-->
{if 1==$data.isInApp}
<script src="/static/vip/js/common_func.js?v=4"></script>
{/if}

<!--微信js分享部分-->
{if $data.signPackage}
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    wx.config({
        debug: false,
        appId: '{$data.signPackage.appId}',
        timestamp: '{$data.signPackage.timestamp}',
        nonceStr: '{$data.signPackage.nonceStr}',
        signature: '{$data.signPackage.signature}',
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
    });
    wx.ready(function () {
        wx.onMenuShareAppMessage({
            title: share_title,
            desc: '{$data.share_introduction}',
            link: '{$data.signPackage.url}',
            imgUrl: '{$data.ossHost}/static/active_fortune_year_2021/img/share.jpg',
            type: 'link',
            dataUrl: '',
            success: function () {
                console.log('成功');
                $('.cover-box').hide();
            },
            cancel: function () {
                console.log('shib');
                $('.cover-box').hide();
            }
        });
        wx.onMenuShareTimeline({
            title: share_title,
            link: '{$data.signPackage.url}',
            imgUrl: '{$data.ossHost}/static/active_fortune_year_2021/img/share.jpg',
            success: function () {
                console.log('成功');
                $('.cover-box').hide();
            },
            cancel: function () {
                console.log('shib');
                $('.cover-box').hide();
            }
        });
    });
</script>
{/if}

<script src="/static/active_fortune_year_2021/js/js.js?v=4"></script>

{include file="../apps/web/view/public/sensors.html" /}
</html>
